---
title: Astro
description: How to use HeroUI with Astro
---

# Astro

Requirements:

- [React 18](https://reactjs.org/) or later
- [Tailwind CSS v4](https://tailwindcss.com/docs/installation/framework-guides/astro)
- [Framer Motion 11.9](https://www.framer.com/motion/) or later

------

<CarbonAd/>

To use HeroUI in your Astro project, you need to follow the following steps:

<Steps>

### Install React

HeroUI is built on top of React, so you need to install React first. You can follow the official
[integration guide](https://docs.astro.build/en/guides/integrations-guide/react/) to install React.


### Install HeroUI

In your Astro project, run one of the following command to install HeroUI:

<PackageManagers
  commands={{
    npm: 'npm i @heroui/react framer-motion',
    yarn: 'yarn add @heroui/react framer-motion',
    pnpm: 'pnpm add @heroui/react framer-motion',
    bun: "bun add @heroui/react framer-motion"
  }}
/>

### Hoisted Dependencies Setup

<Blockquote color="primary">
**Note**: This step is only for those who use `pnpm` to install. If you install HeroUI using other package managers, you may skip this step.
</Blockquote>

If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.

```bash
public-hoist-pattern[]=*@heroui/*
```

After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.

### Tailwind CSS Setup

HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/installation/framework-guides/astro) to install Tailwind CSS. Then you need to add 
the following code to your `tailwind.config.cjs` file:

<Blockquote color="primary">
**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
</Blockquote>

```js {2,9,14-15}
// tailwind.config.cjs
const { heroui } = require("@heroui/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [heroui()]
}
```

### Usage

Now you can import HeroUI components and use them in your Astro project:

```markdown
---
import Layout from '../layouts/Layout.astro';
import {Button} from '@heroui/react';
---

<Layout title="Welcome to Astro.">
  <main>
      <Button color="primary" client:visible>My button</Button>
  </main>
</Layout>
```

Note that you have to add `client:visible` to the component to make it visible only on the client side. Otherwise
some functionalities of HeroUI components may not work properly.

</Steps>